<script setup lang="ts">
import {defineProps} from 'vue'
import {message} from "ant-design-vue";
import {EllipsisOutlined} from "@ant-design/icons-vue"
const { title, bgColor, access } = defineProps({
  title: {
    required: true,
    type: String,
  },
  bgColor: {
    required: false,
    type: String,
    default: 'rgba(241, 246, 255,.81)'
  },
  access: {
    required: true,
    type: String
  }
})
let data = []
let userData = []
const handelRes = async () => {
  if(!access){
    return
  }
  let res:any;
  switch (access) {
    case '推荐关注':
      res = '推荐关注请求';
      // 数据展示
        data = [
          {
            name: 'lww',
            id: '1',
            img: 'http://qiniuyun.linter.top/Linter/Vue_img/User/%E7%94%A8%E4%BE%8B%E5%A4%B4%E5%83%8F1.png'
          },
          {
            name: 'hzt',
            id: '2',
            img: 'http://qiniuyun.linter.top/Linter/Vue_img/User/%E7%94%A8%E4%BE%8B%E5%A4%B4%E5%83%8F2.png'
          },
          {
            name:  'psy',
            id: '3',
            img: 'http://qiniuyun.linter.top/Linter/Vue_img/User/%E7%94%A8%E4%BE%8B%E5%A4%B4%E5%83%8F3.png'
          },
          {
            name: 'ys',
            id: '4',
            img: 'http://qiniuyun.linter.top/Linter/Vue_img/User/%E7%94%A8%E4%BE%8B%E5%A4%B4%E5%83%8F4.png'
          }
        ]
      break
    case '论坛社区':
      res = '论坛社区请求';
      data = [
        {
          name: 'Figma',
          id: '1',
          img: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/Class/Figma%201.png'
        },
        {
          name: 'HTML',
          id: '2',
          img: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/Class/HTML5%20%281%29%201.png'
        },
        {
          name:  'Vue',
          id: '3',
          img: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/Class/Vue%201.png'
        },
        {
          name: 'python',
          id: '4',
          img: 'http://qiniuyun.linter.top/Linter/Vue_img/Home/Class/Python%20%281%29%201.png'
        }
      ]
      break
    default:
      break
  }
  if (res){
    return res
  }
  return message.warning("请求出错了")
}
const cardData = handelRes()
console.log(cardData)

function handelOk(){
  message.success('成功')
}


</script>

<template>
  <a-card :bordered="false" :body-style="{padding: '1rem',background:bgColor}" class="com-forum">
    <h3 class="com-forum-title">{{ title }}</h3>
    <a-list>
      <a-list-item v-for="item in data" :key="item" class="set-list-item">
        <a-list-item-meta>
          <template #avatar>
            <a-avatar :src="item.img" />
          </template>
          <template #title>
            {{ item.name }}
          </template>
        </a-list-item-meta>
        <template #actions>
          <a-button class="btn-set-community" @click="handelOk">关注</a-button>
        </template>
      </a-list-item>
      <a-flex justify="flex-end">
        <a-tooltip>
          <template #title>更多</template>
          <EllipsisOutlined />
        </a-tooltip>
      </a-flex>
    </a-list>
  </a-card>
</template>

<style scoped lang="scss">
  .com-forum{
    height: auto;
    box-sizing: border-box;
    border-radius: .72rem;
  }
  .com-forum-title{
    margin: 1rem 0 0 0.25rem;
    padding-bottom: .25rem;
    font-weight: 800;
    font-size: 1rem;
  }
  .set-list-item{
    width: 100%;
    min-height: 3.2rem;
    box-sizing: border-box;
    margin-bottom: .5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(40.924px);
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(255, 61, 0, 0.096) 0%, rgba(153, 59, 29, 0.0555) 100%);
  }
  .btn-set-community{
    color: #abbce2;
  }
</style>
